<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    
</h:head>
<h:body>

<ui:composition template="/base.xhtml">
    <ui:define name="base">
    
    <div class="header">
        <a href="index.html" class="logo centralize"></a>
    </div>    
    
    <div class="login" id="login">
        <div class="wrap">
            <h1>Welcom. Please Log In</h1>
            <form action="j_security_check" method="post" id="validate">
            <div class="row-fluid">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-user"></i></span>
                    <input type="text" name="j_username" value="Administrator" placeholder="Login" class="validate[required]"/>
                </div>                                                 
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-exclamation-sign"></i></span>
                    <input type="password" name="j_password" value="Somepassword" placeholder="Password" class="validate[required]"/>
                </div>          
                <div class="dr"><span></span></div>                                
            </div>                
            <div class="row-fluid">
                <div class="span8 remember">                    
                    <input type="checkbox" name="rem"/> Remember me                    
                </div>
                <div class="span4    TAR">
                    <input type="submit" class="btn btn-block btn-primary" value="Log In"/>
                </div>
            </div>
            </form>
            <div class="dr"><span></span></div>
            <div class="row-fluid">
                <div class="span8">                    
                    <button class="btn btn-block" onClick="loginBlock('#forgot');">Forgot your password?</button>
                </div>
                <div class="span4">
                    <button class="btn btn-warning btn-block" onClick="loginBlock('#sign');">Registration</button>
                </div>
            </div>            
        </div>
    </div>
    
    <div class="login" id="sign">
        <div class="wrap">
            <h1>Registration</h1>
            
            <div class="row-fluid">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-user"></i></span>
                    <input type="text" name="login" placeholder="Login"/>
                </div>
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-envelope"></i></span>
                    <input type="text" name="login" placeholder="E-mail"/>
                </div>                
                <div class="dr"><span></span></div>                
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-exclamation-sign"></i></span>
                    <input type="text" name="password" placeholder="Password"/>
                </div>                          
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-question-sign"></i></span>
                    <input type="text" name="re-password" placeholder="Re-Password"/>
                </div>                                
                <div class="dr"><span></span></div>                                
            </div>
            <div class="row-fluid">
                <div class="span8 remember">
                    <input type="checkbox"/> I agree with terms...
                </div>
                <div class="span4 TAR">
                    <button class="btn btn-block btn-primary">Registration</button>
                </div>
            </div>
            <div class="dr"><span></span></div>
            <div class="row-fluid">
                <div class="span4">                    
                    <button class="btn btn-block" onClick="loginBlock('#login');">Back</button>
                </div>                
            </div>             
        </div>
    </div>    
    
    <div class="login" id="forgot">
        <div class="wrap">
            <h1>Forgot your password?</h1>
            <div class="row-fluid">
                <p>Please enter your email address to recover your password</p>
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-envelope"></i></span>
                    <input type="text" name="email" placeholder="E-mail"/>
                </div>                                                           
                <div class="dr"><span></span></div>                               
            </div>                   
            <div class="row-fluid">
                <div class="span4">                    
                    <button class="btn btn-block" onClick="loginBlock('#login');">Back</button>
                </div>                                
                <div class="span4"></div>
                <div class="span4 TAR">
                    <button class="btn btn-block btn-primary">Recover</button>
                </div>
            </div>                                  
        </div>
    </div>
        
    </ui:define>
</ui:composition>

</h:body>
</html>